<template>
    <div class="tackTicket">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        {{time}}
      </div>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <div class="content" ref="content">
        <div class="content-container">
          <div class="top">
            <div class="left">
              <h1 class="name">{{ticketInfo.filmName}}</h1>
              <p class="time">{{ticketInfo.playingTimeDesc}}（{{ticketInfo.languageType+ticketInfo.filmTypeVersion}}）</p>
              <p class="address">{{ticketInfo.cinemaName+ticketInfo.movieHallName}}</p>
              <p class="site"><span v-for="item in ticketInfo.seatInfoList" style="padding-right: 7px">{{item}}</span></p>
              <!--<div class="tags">-->
                <!--<div class="tag">含观影小食</div>-->
              <!--</div>-->
            </div>
            <div class="right">
              <img class="pic" :src="ticketInfo.posterPicUrl" alt="">
            </div>
            <div class="ball ball-bottom-left"></div>
            <div class="ball ball-bottom-right"></div>
          </div>
          <div class="center">
            <div class="title">取电影票&nbsp;&nbsp;&nbsp;<span class="count">{{ticketInfo.ticketNum}}张</span></div>
            <div class="QR-code-wrapper">
              <canvas id="canvas" style="width: 140px !important;height: 140px !important;"></canvas>
            </div>
            <div class="ticket-count-wrapper">
              取票号 :<span class="count">{{ticketInfo.ticketVoucher|_splitNum}}</span>
            </div>
            <div class="ball ball-bottom-left"></div>
            <div class="ball ball-bottom-right"></div>
          </div>
          <div class="bottom">
            <div class="title">
              {{ticketInfo.cinemaName}}
            </div>
            <p class="address">{{ticketInfo.cinemaAddress}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import QRCode from 'qrcode'
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage";
  import refresh from '../../../components/refresh/refresh'
    export default {
        name: "tackTicket",
        components:{
          'back':back,
          'refresh':refresh
        },
        data(){
          return {
            isRefresh:false,
            ticketInfo:{},
            downloadButton:true,
            ticketVoucher:'',
            time:''
          }
        },
        computed:{

        },
        mounted() {
        this._getMovieTicketDetail()

        this.$nextTick(()=>{
          if(!this.scroll){
            // return
            let scroll = new BScroll(this.$refs['content'],{
              click:true,
              pullDownRefresh: {
                threshold: 40,
                stop: 30
              }
            })
            //下拉回弹刷新停留事件600ms
            scroll.on('pullingDown', () => {
              this.isRefresh = true
              setTimeout(()=>{
                window.history.go(0)
                scroll.finishPullDown();
              },600)
            });
          }else {
            this.scroll.refresh();
          }
        })
      },
        filters:{
          _splitNum(num){
            if(!num){
              return
            }
            let str = num.toString()
            return str.substring(0,4) + ' '+str.substring(4,8)+' '+str.substring(8,12)+ ' '+str.substring(12,16)
          }
        },
        methods:{
          _useqrcode(){
            let canvas = document.getElementById('canvas')
            QRCode.toCanvas(canvas,this.ticketVoucher, function (error) {
            })
          },
          _getMovieTicketDetail(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:'/api/member/myFilmTicketDetail',
                data:{
                  orderId:this.$route.query.orderId
                }
              }
            ).then((res)=>{
              if(res.data.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.ticketInfo = data
                  this.ticketVoucher = data.ticketVoucher
                  this._getTitleTime()
                }else {
                }
              }else {
              }

            })
          },
          _getTitleTime(){
            //获取当期时间戳差
            let currentTime = this.ticketInfo.currentTime
            let playingTime = this.ticketInfo.playingTime
            let currentTimestamp = (new Date(currentTime)).getTime()
            let playingTimestamp = (new Date(playingTime)).getTime()
            //若当前时间戳大于开场时间戳则返回，并将title设置为'已开场'反正则进行计算
            if(currentTimestamp>playingTimestamp){
              this.time = '已开场'
              return
            }else {
              //获取当前时间差
              let differ = playingTimestamp - currentTimestamp
              //相差天数
              let day = parseInt(differ/(24*60*60*1000))
              //相差小时
              let hour = parseInt((differ%(24*60*60*1000))/(60*60*1000))
              //相差分
              let minute = parseInt(((differ%(24*60*60*1000))%(60*60*1000))/(60*1000))
              相差秒
              let second = parseInt(((differ%(24*60*60*1000))%(60*60*1000))%(60*1000)/1000)
              //计算时间倒计时
              let time = setInterval(()=>{
                //判断时候倒计时为0
                if(second===0&&minute===0&&hour===0&&day===0){
                  this.time = '已开场'
                  clearInterval(time)
                }else {
                  //计算时间
                  second --
                  if(second===0){
                    minute-=1
                    second = 59
                    if(minute<=0){
                      hour-=1
                      minute=59
                      if(hour<=0){
                        day-=1
                        if(day<=0){
                          this.time = '已开场'
                          clearInterval(time)
                          return
                        }
                        hour=23
                      }
                    }
                  }
                  //将时间转换成dd-ss-mm-ss格式
                  this.time = (day<10?('0'+day):day)+'天'+(hour<10?('0'+hour):hour)+'小时'+(minute<10?('0'+minute):minute)+'分'+(second<10?('0'+second):second)+'秒后开场'
                }
              },1000)
            }
          }
        },
        watch:{
          'ticketVoucher'(){
            this._useqrcode()
          }
        }
    }
</script>

<style scoped lang="stylus">
  #canvas
    height 140px !important
    width 140px !important
  .tackTicket
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)
      overflow hidden
      .content-container
        height calc(100% + 1px)
        background #171718
        margin 0 10px
        .top
          display flex
          position relative
          border-bottom 2px dashed #101011
          padding 21px 19px 17px 19px
          .left
            flex 1px
            text-align left
            .name
              height 22px
              color #ffffff
              line-height 22px
              font-size 16px
              font-weight 500
            .time
              padding-top 6px
              height 17px
              line-height 17px
              color #ACB1BB
              font-size 12px
            .address
              padding-top 2px
              height 17px
              line-height 17px
              color #ACB1BB
              font-size 12px
            .site
              padding-top 2px
              height 17px
              line-height 17px
              color #ACB1BB
              font-size 12px
            .tags
              height 15px
              padding-top 8px
              .tag
                height 13px
                border 1px solid #8B929E
                display inline-block
                font-size 10px
                line-height 13px
                border-radius 2px
                color #8B929E
                padding 1px 3px
          .right
            position relative
            flex 0 0 70px
            overflow hidden
            .pic
              position relative
              top calc(50% - 51px)
              height 102px
              width 70px
          .ball
            position absolute
            background #101011
            width 13px
            height 13px
            border-radius 6px
            &.ball-bottom-left
              bottom -7px
              left -6px
            &.ball-bottom-right
              bottom -7px
              right -6px


        .center
          position relative
          padding 14px 20px 27px 20px
          border-bottom 2px dashed #101011
          .title
            text-align left
            padding 0
            color #FFFFFF
            font-size 16px
            height 22px
            line-height 22px
            .count
              height 17px
              line-height 17px
              color #ACB1BB
              font-size 12px
              vertical-align bottom
          .QR-code-wrapper
            margin 34px auto 27px auto
            height 140px
            width 140px
            background #00a0dc
          .ticket-count-wrapper
            height 44px
            margin 0 26px
            border 1px solid #8B929E
            border-radius 4px
            line-height 44px
            color #ACB1BB
            font-size 12px
            .count
              padding-left 8px
              color  #ffffff
              font-size 16px
          .ball
            position absolute
            width 13px
            height 13px
            background #101011
            border-radius 6px
            &.ball-bottom-left
              bottom -6px
              left -6px
            &.ball-bottom-right
              bottom -6px
              right -6px
        .bottom
          padding 22px 20px 0 20px
          .title
            height 22px
            line-height 22px
            font-size 16px
            color #ffffff
            padding 0
            text-align left
          .address
            padding-top 13px
            height 17px
            line-height 17px
            text-align left
            color #ACB1BB
            font-size 12px

</style>
